<template>
  <el-dialog v-model="visible" :title="title" width="40%" :modal="true" :close-on-click-modal="false">
    <el-row style="margin-bottom: 8px">
      <el-col>
        <el-button-group>
          <el-button v-if="editFlag == 1" type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <el-table :data="selectData" height="300px" border fit>
      <el-table-column label="取值">
        <template #default="scope">
          <el-input v-model="scope.row.code" maxlength="15" @change="handleValid(scope.$index,scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template #default="scope">
          <el-input v-model="scope.row.text" maxlength="15" @change="handleValid(scope.$index,scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="启用">
        <template #default="scope">
          <el-switch v-model="scope.row.flag" active-value="1" inactive-value="0" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="editFlag == 1" type="text" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button v-if="editFlag == 1" type="primary" @click="handleSave">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';

export default defineComponent({
  name: 'selectDataWin',
  props: ['pageType', 'modelValue'],
  setup(props, { emit }) {
    const { pageType } = toRefs(props);
    const { proxy } = getCurrentInstance();

    const vueData = reactive({
      visible: false,
      saveFlag: true,
      editFlag: 0, // 1可编辑 0只读
      title: '',
      selectData: [],
    });

    function show(propInfo, editFlag) {
      vueData.editFlag = editFlag;
      vueData.title = `${propInfo.name}(${propInfo.code})选值列表`;
      vueData.visible = true;
      Object.assign(vueData.selectData, propInfo.ext.selectData);
    }

    function handleAdd() {
      vueData.selectData.push({ code: '', text: '', flag: '1' });
    }

    function handleSave() {
      if (vueData.saveFlag) {
        const data = vueData.selectData.filter((item) => item.code !== '');
        emit('update:modelValue', data);
        emit('change', data);
      } else {
        proxy.$modal.msgWarning('取值或名称不允许重复');
      }
    }

    function handleDelete(rowIdx, row) {
      vueData.selectData.splice(rowIdx, 1);
    }

    function handleValid(rowIdx, row) {
      let len = vueData.selectData.filter((item) => row.code !== '' && item.code === row.code).length;
      if (len > 1) {
        proxy.$modal.msgWarning('取值不允许重复');
        vueData.saveFlag = false;
      } else {
        vueData.saveFlag = true;
        len = vueData.selectData.filter((item) => row.text !== '' && item.text === row.text).length;
        if (len > 1) {
          proxy.$modal.msgWarning('名称不允许重复');
          vueData.saveFlag = false;
        } else {
          vueData.saveFlag = true;
        }
      }
    }

    return {
      pageType,
      ...toRefs(vueData),
      handleAdd,
      handleSave,
      handleDelete,
      handleValid,
      show,
    };
  },
});
</script>

<style scoped>

</style>